<template>
  <div class="container">
    <div class="pc-terminal">
      <img v-if="fileSpace" class="bc-img" :src="fileSpace + '/images/pc-terminal.png'" alt="">
      <div class="font-16 font-color-9 text-align-c">使用电脑浏览器打开网址</div>
      <div class="pc-url line-1 text-align-c">{{urlAdress}}</div>
      <button class="mar-t-30 copy-btn" @click="$pt.setClipboardData({data: urlAdress})">复制链接</button>
    </div>
    <div class="pad-l-12 pad-t-15 font-12 font-color-9">
      <div>登录流程</div>
      <p>1.复制链接后粘贴至电脑浏览器访问进入登录界面。</p>
      <p>2.联系客服要网页端的账号密码。</p>
      <p>3.回到登录界面输入账号密码进入系统。</p>
    </div>
    <div class="footer">
      <div @click="concatService">联系客服</div>
      <!-- <div class="dividing"></div>
      <div @click="toHelpCenter">帮助中心</div> -->
    </div>
    <div class="div-pop" v-if="layerBoolean">
      <get-customer-layer :info="serviceInfo" @close="closeLayer" />
    </div>
  </div>
</template>
<script>
import GetCustomerLayer from '@/components/GetCustomerLayer'
import { getMemberLoginUrl, getCustomerInfo } from '@/api/personal'
export default {
  components: { GetCustomerLayer },
  data() {
    return {
      urlAdress: '',
      layerBoolean: false,
      serviceInfo: {} // 客服信息
    }
  },
  onShow() {
    this.init()
  },
  methods: {
    init() {
      getMemberLoginUrl().then(response => {
        if (response.isError) return
        this.urlAdress = response.data
      }).catch(() => {
      })
    },
    // 去帮助中心
    toHelpCenter() {
      this.$pt.navigateTo({ url: `/pages/personal/help/main` })
    },
    // 联系客服
    concatService() {
      getCustomerInfo(this.getCustomerId).then(response => {
        if (response.isError) return
        this.serviceInfo = response.data
      }).catch((
      ) => {})
      this.layerBoolean = true
    },
    // 监听客服弹窗关闭事件
    closeLayer() {
      this.layerBoolean = false
    }
  }
}
</script>
<style lang="less" scoped>
.container{
  position: relative;
  min-height: 100vh;
}
.pc-terminal{
  padding-top: 75px;
  padding-bottom: 17px;
  background-color: white;
  position: relative;
  .pc-url{
    width: 238px;
    font-size: 18px;
    margin: 15px auto 0;
  }
}
.bc-img{
  width: 197px;
  height: 173px;
  margin: 0 auto;
}
.copy-btn{
  padding: unset;
  width: 243px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 22px;
  background-color: #7427ff;
  color: white;
}
.footer{
  position: absolute;
  bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #00A8FF;
  font-size: 12px;
  width: 100%;
  .dividing{
    width: 1px;
    height: 11px;
    background-color:  #00A8FF;
    margin: 0 10px;
  }
}
</style>
